<!--{template /module/admin/view/head}-->
<div id="left_layout">
	<div id="main_content" class="container-fluid">
		<!--{template /module/admin/view/head_nav}-->
		<div class="row-fluid">
			<form method="post" action="{$ADMIN_SCRIPT}/exam/_option&do={$_var[gp_do]}&id={$_var[gp_id]}&optionid={$_var[gp_optionid]}&ppage={$_var[gp_ppage]}&page={$_var[page]}&psize={$_var[psize]}{$search[querystring]}" onsubmit="javascript:return check_form(this);">
				<input type="hidden" name="formsubmit" value="yes"/>
				<input type="hidden" name="hdnFile01" value=""/>
				<div class="well widget">
					<div class="widget-header">
						<p class="text">* {lang admin.validate.require}</p>
					</div>
					<div class="widget-content">
						<fieldset>
							<!--{if count($exam_categories) > 0}-->
							<label>{lang exam.index_option_edit.view.category.label}</label>
							<select name="sltCategoryID">
			               		<option value="">{lang exam.index_option_edit.view.category.select.0}</option>
			               		<!--{loop $exam_categories $loop $category}-->
			               		<option value="{$category[EXAM_CATEGORYID]}" {if $exam_option['EXAM_CATEGORYID'] == $category['EXAM_CATEGORYID']} selected="selected"{/if}>{$category[CNAME]}</option>
			               		<!--{/loop}-->
			               	</select>
			               	<span class="help-inline">{lang exam.index_option_edit.view.category.tips}</span>
			               	<!--{/if}-->
			               	
			               	<label>{lang exam.index_option_edit.view.displayorder.label} *</label>
							<input type="text" size="6" maxlength="6" class="input-mini" name="txtDisplayOrder" placeholder="{lang exam.index_option_edit.view.displayorder.placeholder}…" value="{$exam_option[DISPLAYORDER]}"/> 
							<span class="help-inline">{lang exam.index_option_edit.view.displayorder.tips}</span>
							
							<label>{lang exam.index_option_edit.view.title.label} *</label>
							<textarea class="span6" name="txtTitle" rows="2" cols="45" placeholder="{lang exam.index_option_edit.view.title.placeholder}...">{$exam_option[TITLE]}</textarea>
							<span class="help-inline">{lang exam.index_option_edit.view.title.tips}</span>
							
							<label>{lang exam.index_option_edit.view.retype.label}</label>
            				<label class="checkbox inline">
								<input type="radio" name="rdoReType" class="fancy" value="0" {if $exam_option['RETYPE'] == 0}checked="checked"{/if} /> {lang exam.index_option_edit.view.retype.radio.0} 
							</label>
							<label class="checkbox inline">
                				<input type="radio" name="rdoReType" class="fancy" value="1" {if $exam_option['RETYPE'] == 1}checked="checked"{/if} /> {lang exam.index_option_edit.view.retype.radio.1}
							</label>
							<label class="checkbox inline">
                				<input type="radio" name="rdoReType" class="fancy" value="2" {if $exam_option['RETYPE'] == 2}checked="checked"{/if} /> {lang exam.index_option_edit.view.retype.radio.2}
							</label>
							<label class="checkbox inline">
                				<input type="radio" name="rdoReType" class="fancy" value="3" {if $exam_option['RETYPE'] == 3}checked="checked"{/if} /> {lang exam.index_option_edit.view.retype.radio.3}
							</label>
							
							<div class="retype retype_0" {if $exam_option['RETYPE'] != 0}style="display:none;"{/if}>
								<p class="thin"></p>
								<label>{lang exam.index_option_edit.view.retype.radio.0.label}</label>
								<textarea class="span6" name="txtReText" rows="3" cols="45" placeholder="{lang exam.index_option_edit.view.retype.radio.0.placeholder}...">{$exam_option[RETEXT]}</textarea>
								<span class="help-inline">{lang exam.index_option_edit.view.retype.radio.0.tips}</span>
							</div>
							
							<div class="retype retype_1" {if $exam_option['RETYPE'] != 1}style="display:none;"{/if}>
								<p class="thin"></p>
								<table class="swfupload">
									<tr>
										<td width="200" valign="top" align="center">
											<p class="img" id="up_file01">
												<!--{if is_array($exam_option['REFILE'])}-->
												<img src="{$exam_option[REFILE][0]}" data="{$exam_option[REFILE][4]}" width="200" style="width:200px;" border="0"/>
												<!--{else}-->
												<img src="static/images/no-picture.jpg" data="" width="200" style="width:200px;" />
												<!--{/if}-->
											</p>
											<hr/>
									
											<div class="upload-button"><span id="swfu_file01"></span></div>
										</td>
									</tr>
								</table>
							</div>
							
							<div class="retype retype_2" {if $exam_option['RETYPE'] != 2}style="display:none;"{/if}>
								<p class="thin"></p>
								<label>{lang exam.index_option_edit.view.retype.radio.2.label}</label>
								<textarea class="span6" name="txtReVideo" rows="3" cols="45">{$exam_option[REVIDEO]}</textarea>
							</div>
							
							<div class="retype retype_3" {if $exam_option['RETYPE'] != 3}style="display:none;"{/if}>
								<p class="thin"></p>
								<label>{lang exam.index_option_edit.view.retype.radio.3.label}</label>	
								<textarea class="span6" name="txtReAudio" rows="3" cols="45">{$exam_option[REAUDIO]}</textarea>
							</div>
							
							<hr/>
							<div id="div_item_option">
								<h5>{lang exam.index_option_edit.view.option.label}</h5>
	            				<table class="table table-bordered swfupload" style="width:auto;">
									<thead>
										<tr>
											<th width="40">{lang exam.index_option_edit.view.option.th.operate}</th>
											<th width="40">{lang exam.index_option_edit.view.option.th.answer}</th>
											<th width="60">{lang exam.index_option_edit.view.option.th.displayorder}</th>
											<th width="120">{lang exam.index_option_edit.view.option.th.name}</th>
											<th width="40">{lang exam.index_option_edit.view.option.th.pic}</th>
								            <th width="130"></th>
										</tr>
									</thead>
									<tbody id="tbl_item_body">
										<!--{loop $exam_option[ITEMS] $loop $item}-->
										<tr id="up_item_{echo $loop + 1;}">
								        	<td>
								        		<a class="btn btn-mini btn-primary" href="javascript:void(null);">{lang admin.operation.delete}</a>
								        	</td>
								        	<td>
								        	 	<input type="checkbox" class="fancy" name="answer[{$item[ITEMID]}]" value="1" {if $item[ANSWER] == 1}checked{/if}/>
								            </td>
								            <td>
								                <input type="text" class="input-mini" name="displayorder[{$item[ITEMID]}]" value="{$item[DISPLAYORDER]}" />
								            </td>
								            <td>
								            	<input type="text" class="input-xlarge" name="title[{$item[ITEMID]}]" value="{$item[TITLE]}" maxlength="30"/>
								            </td>
								          
								            <td class="swfupload">
												<!--{if $item['FILE01']}-->
												<img class="img" src="{$item[FILE01]}" data="{$item[_FILE01]}" width="35" style="width:35px; height:35px;" border="0"/>
												<!--{else}-->
												<img class="img" src="static/images/no-picture.jpg" data="" width="35" style="width:35px; height:35px;" />
												<!--{/if}-->
											</td>
											<td>
												<div class="upload-button" type="" ref="{echo $loop + 1;}" data="{$item[ITEMID]}"><span></span></div>
								            </td>
								        </tr>
										<!--{/loop}-->
									    <tr id="up_item_0" class="tmp">
								        	<td>{lang exam.index_option_edit.view.option.td.add.label}</td>
								        	<td class="checkbox">
								                <input type="checkbox" class="fancy" name="newanswer[]" value="1"/>
								            </td>
								            <td>
								                <input type="text" class="input-mini" name="newdisplayorder[]" value="" />
								            </td>
								            <td>
								            	<input type="text" class="input-xlarge" name="newtitle[]" value="" maxlength="30"/>
								            </td>
								            <td class="swfupload">
												<img class="img" src="static/images/no-picture.jpg" data="" width="35" style="width:35px; height:35px;" />
											</td>
											<td>
												<div class="upload-button" type="new" ref="0" data=""><span></span></div>
								            </td>
								        </tr>
								        <tr>
								            <td colspan="6">
								            	<input type="button" id="btn_add_option" name="btnAddAward" class="btn" value="{lang exam.index_option_edit.view.option.td.button.add}" />
								            </td>
								        </tr>
									</tbody>
								</table>
							</div>
					   </fieldset>
					   
					   <hr/>
					   <fieldset>
							<!--{if $dispatches['method'] == '_pub'}-->
							<button type="submit" class="btn btn-small btn-primary" {$dispatches[operations][add]}>{lang admin.operation.submit}</button>
							<!--{else}-->
							<button type="submit" class="btn btn-small btn-primary" {$dispatches[operations][edit]}>{lang admin.operation.submit}</button>
							<!--{/if}-->
							
							<button type="reset" class="btn btn-small">{lang admin.operation.reset}</button>
							<button type="button" class="btn btn-small" onclick="javascript:location.href='{$ADMIN_SCRIPT}/exam/_option&id={$_var[gp_id]}&ppage={$_var[gp_ppage]}&page={$_var[page]}&psize={$_var[psize]}{$search[querystring]}';">{lang admin.operation.go.back}</button>
						</fieldset>
						
					</div>
				</div>	
			</form>
		</div>
	</div>
</div> 

<script type="text/javascript" src="static/plugins/swfupload.js"></script>
<script type="text/javascript" src="static/plugins/swfupload_handlers.js"></script>
<script type="text/javascript" src="static/plugins/swfupload_images.js"></script>

<script>
var item_count = {echo $table['FILENUM'] + 0;};
var swfu_file01 = null;
var answer_option_count = {echo count($exam_options) + 0;};

swfupload_params.limit = 1;
swfupload_params.uploaded = 0;

function fileQueueError(file, errorCode, message) {
	if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
		$.dialog({message:'{lang admin.validate.swfupload.lang.limit}'});
	}else{
		$.dialog({message:'{lang admin.validate.swfupload.echo.fail}'});
	}
}

function uploadSuccess(file, serverData) {
	if(serverData.substring(0, 7) === "FILEID:") {
		var tempArr = serverData.split('|');
		var photoPath = formatFilePath(serverData.substring(7));
		
		$('#up_' + tempArr[5] + ' img').attr('src', photoPath).attr('data', serverData.substring(7));
	}else $.dialog({message:serverData});
}

function createSwfUpload(file, title){
	var swf_config = {
		upload_url: "{$ADMIN_SCRIPT}/exam/_upload&file=" + file + "&_SALT={$_var[current][SALT]}",
		
		file_size_limit : "200KB", 
		file_types : "*.jpg;*.bmp;*.gif;*.png",
		file_types_description : "JPG Images",
		file_upload_limit : "0",
		
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess,
		upload_complete_handler : uploadComplete,
		
		button_image_url : "static/images/swfupload/swfupload.png",
		button_placeholder_id : "swfu_" + file,
		button_width: 120,
		button_height: 18,
		button_text : '{lang admin.validate.swfupload.lang.button.choice}' + title + '({lang admin.validate.swfupload.lang.button.size.200})',
		button_text_style : '',
		button_text_top_padding: 0,
		button_text_left_padding: 18,
		
		flash_url : "static/swfupload.swf", 
		debug: false
	};
	
	return new SWFUpload(swf_config);
}

function check_form(frm){
	if(frm.txtDisplayOrder.value.trim().length == 0){
		$(frm.txtDisplayOrder).next('.help-inline').css('color', 'red');
    	frm.txtDisplayOrder.focus();
    	return false;
    }
    
	if(frm.txtTitle.value.trim().length == 0){
		$(frm.txtTitle).next('.help-inline').css('color', 'red');
    	frm.txtTitle.focus();
    	return false;
    }
    
    frm.hdnFile01.value = $('#up_file01 img').attr('data') ? $('#up_file01 img').attr('data') : '';
    
    $('#div_item_option .upload-button').each(function(index, item){
    	var ref = $(item).attr('ref');
    	var type = $(item).attr('type');
    	var data = $(item).attr('data');
    	
    	if(type == 'new') $(item).append('<input type="hidden" name="newfile[]" value="' + $('#up_item_' + ref + ' img').attr('data') + '"/>');
    	else $(item).append('<input type="hidden" name="file[' + data + ']" value="' + $('#up_item_' + ref + ' img').attr('data') + '"/>');
	});
	
    return true;
}

$(function(){
	$('.fancy').uniform();
	
	$('fieldset input,textarea,select').blur(function(){
		$(this).next('.help-inline').css('color', '#333');
	});
	
	$("input[name='rdoReType']").click(function(){
		$('.retype').hide();
		$('.retype_' + $(this).val()).show();
	});
	
	$('.swfupload img').dblclick(function(){
		$(this).attr({src:'static/images/no-picture.jpg', data:''});
	});
	
	$('#btn_add_option').click(function(){
		if($('#tbl_item_body tr').length >= item_count + 1){
			$.dialog({message:'{lang exam.index_option_edit.view.option.limit.text}' + item_count + '{lang exam.index_option_edit.view.option.limit.unit}'});
			return;
		}
		
		answer_option_count++;
		
    	var tbody = $('#tbl_item_body').get(0);
    	
    	var tempInsertRow = tbody.rows[tbody.rows.length - 2];
    	
    	var tempNewRow = tempInsertRow.cloneNode(true);
    	tempNewRow.style.display = '';
    	$(tempNewRow).attr('id', 'up_item_' + answer_option_count);
    	
    	$('.checkbox', tempNewRow).html('<input type="checkbox" class="fancy" name="newanswer['+ answer_option_count + ']" value="1"/>');
    	$('.fancy', tempNewRow).uniform();
    	
    	$('.upload-button', tempNewRow).attr('ref', answer_option_count).html('<span id="swfu_item_' + answer_option_count + '"></span>');
    	
    	$('img', tempNewRow).unbind('dblclick').dblclick(function(){
    		$(this).attr({src:'static/images/no-picture.jpg', data:''});
    	}).attr({src:'static/images/no-picture.jpg', data:''});
    	
    	var inputs = tempNewRow.getElementsByTagName('input');
    	for(var i = 0; i < inputs.length; i++){
    		if(inputs[i].name.indexOf('newdisplayorder') != -1 
    		|| inputs[i].name.indexOf('newtitle') != -1) inputs[i].value = '';
    	}
    	
    	tbody.insertBefore(tempNewRow, tbody.rows[tbody.rows.length - 1]);
    	
    	createSwfUpload('item_' + answer_option_count, '{lang exam.index_option_edit.view.file.item}');
    });
	
    $('#div_item_option .btn-primary').click(function(){
		$(this).parent().parent().remove();
	});
	
    $('#div_item_option .upload-button').each(function(index, item){
		var ref = $(item).attr('ref');
		$('span', item).attr('id', 'swfu_item_' + ref);
		
		createSwfUpload('item_' + ref, '{lang exam.index_option_edit.view.file.item}');
	});
	
	swfu_file01 = createSwfUpload('file01', '{lang exam.index_option_edit.view.file.item}');
});
</script>
<!--{template /module/admin/view/foot}-->